<route>
    {
        meta: {
            layout: 'index',
            title:'相关培训'
        }
    }  
</route>
<template>
  <div>
      <div class="top">
        <a-row :gutter="[16, 10]">
          <a-col class="gutter-row" :span="6">
            <a-button type="dashed" style="width: 100%" @click="selectType('工艺风险点')">工艺风险点</a-button>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <a-button type="dashed" style="width: 100%" @click="selectType('演示视频')">演示视频</a-button>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <a-button type="dashed" style="width: 100%" @click="selectType('施工风险因素')">施工风险因素</a-button>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <a-button type="dashed" style="width: 100%" @click="selectType('主要危险源辨识')">主要危险源辨识</a-button>
          </a-col>
        </a-row>
      </div><br />
    <riskPoints v-if="type == '工艺风险点'"></riskPoints>
    <demoVideo v-if="type == '演示视频'"></demoVideo>
    <riskFactors v-if="type == '施工风险因素'"></riskFactors>
    <majorHazards v-if="type == '主要危险源辨识'"></majorHazards>
  </div>
</template>
<script setup>
import riskPoints from "./riskPoints/index.vue";
import riskFactors from "./riskFactors/index.vue";
import majorHazards from "./majorHazards/index.vue";
import demoVideo from "./demoVideo/index.vue";

const top = ref(10);
const type = ref("工艺风险点");
function selectType(typeName) {
  type.value = typeName;
}
</script>
<style scoped>
.top {
  background-color: #ffffff; /* 设置背景色为灰色 */
}
</style>
